<template>
  <div  class="page-index page-frame">
    <div class="page-index-body page-frame-body">
      <div class="i-search">
        <div class="i-search-input">
          <input placeholder="请输入想要搜索的内容" type="text" >
        </div>
        <div @click="JumpMap" class="i-map">地图</div>
      </div>
      <div class="i-list">
        <div id="wrapper">
            <div id="scroller">
              <item-line v-for="(item,index) in siteList" v-bind:key="index" v-bind:item="item"></item-line>
            </div>
        </div>


      </div>
    </div>
    <nav-toolbars data="2"></nav-toolbars>
  </div>
</template>

<script>
var AlloyTouch = require("alloytouch");
var Transform = require("css3transform");
var scrollHei = null;
import ItemLine from "@/components/site.vue";
import NavToolbars from "@/components/navigation.vue";
export default {
  name: "Index",
  data() {
    return {
      searchval: "",
      loadMoreFlag: false,
      lat: "",
      lng: "",
      searchFlag: false,
      bodyHei: 0,
      pageSize: 10,
      pageIndex: 1,
      siteList: []
    };
  },
  components: {
    NavToolbars,
    ItemLine
  },
  created() {
    var self = this;
    var geolocation = new qq.maps.Geolocation(config.key, config.str);
    // 腾讯地图获取坐标
    geolocation.getLocation(
      function(res) {
        self.Indicator.close();
        var latitude = res.lat; // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.lng; // 经度，浮点数，范围为180 ~ -180。

        self.lat = latitude;
        self.lng = longitude;
      },
      function(e) {
        console.log(e);
      }
    );
  },
  mounted() {
    var self = this;
    var sHei = $(".i-search").height();
    var nHei = $(".page-nav").height();
    this.bodyHei = window.innerHeight - sHei - nHei;

    Transform($("#scroller").get(0), true);

    window.AT = new AlloyTouch({
      touch: "#wrapper", //反馈触摸的dom
      target: document.querySelector("#scroller"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");
          if (self.loadMoreFlag) {
            self.loadMore(function() {
              self.$nextTick(function() {
                AT.min = self.GetScrollHei();
              });
            });
          }
        }
      }
    });

    // 加载更多
    self.loadMore(function() {
      self.$nextTick(function() {
        AT.min = self.GetScrollHei();
      });
    });
  },
  methods: {
    JumpMap() {
      this.$router.push("/map");
    },
    JumpSite(id) {
      this.$router.push({
        path: "deviceInfo",
        query: { id:id }
      });
    },
    GetScrollHei() {
      var self = this;
      var scrollHei = $("#scroller").height();
      var hei = scrollHei > self.bodyHei ? self.bodyHei - scrollHei : 0;
      return hei;
    },
    search() {
      if (true) {
        this.searchFlag = true;
        // 加载更多
        self.loadMore(function() {
          self.$nextTick(function() {
            AT.min = self.GetScrollHei();
          });
        });
      }
    },
    loadMore(callback) {
      var self = this;

      // 定义请求的参数
      var params = {
        pageIndex: self.pageIndex,
        pageSize: self.pageSize,
        tag: ""
      };
      // 如果是搜索的，赋值
      if (self.searchFlag) {
        params.tag = self.searchval;
      }
      // 定义请求
      var req = this.Axios.get(this.Interface.host, {
        params: self.GetQuery(params)
      });

      // 请求数据
      req.then(res => {
        var data = res.data.data;
        var sites = data.sites;
        var counts = sites.count;
        // 合并数据
        self.siteList = self.siteList.concat(sites.rows);

        // 判断是否还有数据
        var nowNum = self.pageIndex * self.pageSize;
        self.loadMoreFlag = counts > nowNum ? true : false;
        self.pageIndex = ++self.pageIndex;

        if (callback) callback();
      });
    },
    GetQuery({ tag, pageIndex, pageSize }) {
      return {
        query: `{
            sites(tag:"${tag}",pageIndex:${pageIndex},pageSize:${pageSize}){
                rows {
                  id
                  name
                  area
                  address
                  collected
                  unitPrice
                }
                count
            }
          }`
      };
    }
  }
};
</script>

<style lang="less" scoped>
.page-index {
  .page-index-body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .i-search {
    height: 100px;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 30px;
    display: -webkit-box;
    .i-search-input {
      -webkit-box-flex: 1;
      input {
        display: block;
        width: 100%;
        height: 70px;
        border-radius: 35px;
        box-sizing: border-box;
        padding-left: 100px;
        background: #fff url("../public/imgs/icon-search.svg") 30px center
          no-repeat;
        background-size: 50px 50px;
      }
    }
    .i-map {
      width: 140px;
      height: 100%;
      line-height: 70px;
      font-size: 28px;
      color: #000;
      text-align: center;
    }
  }
  .i-list {
    position: relative;
    -webkit-box-flex: 1;

  }
}
</style>
